速報APP / 工具 / Debuggable Browser

Debuggable Browser

價格:免費

更新日期:2016-08-14

檔案大小:952k

目前版本:1.3

版本需求:Android 4.4 以上版本

官方網站:https://www.pertiller.tech

Email:david@pertiller.tech

聯絡地址:Martinstraße 88/9 1180 Wien Österreich

Debuggable Browser(圖1)-速報App

Debugging for web developers and web designers

Note

This app was built for web developers who aim to deliver the best user experience of their web app to Android users. If you're not a web developer or web designer or misunderstood what this is all about, then this app probably isn't what you're looking for ;)

So what is it?

Debuggable Browser(圖2)-速報App

Just a debug-enabled WebView, allowing you to use Chrome's Developer Tools (running on your PC or Mac) to inspect and debug your web app while its running on your actual device.

What's the use of it?

If you ever opened your web site in the Android stock browser and encountered one of the following issues, this app might prove useful to you:

• The layout or styling of your web site appears broken when viewed in the Android stock browser

Debuggable Browser(圖3)-速報App

• Your JavaScript code didn't produce the expected result or the computation must have suddenly stopped during execution (maybe an exception was thrown?)

• Animations are laggy or just don't animate as expected

Description

It sometimes happens that a web app doesn't work on mobile browsers, even though it's working fine on desktop browsers. Even worse, sometimes defects occur only on (certain) mobile devices, so you cannot simulate and reproduce it on a desktop browser. This is where remote debugging with Chrome's DevTools proves to be useful. While Chrome for Android perfectly supports this already, the Android stock browser doesn't. This is unfortunate, since a lot of Android bugs seem to occur only on the stock browser and not on Chrome anyways.

Debuggable Browser(圖4)-速報App

So this app lets you run web sites within the native browser (WebView), while giving you the possibility to inspect and debug the page with the Chrome DevTools.

How to start remote debugging?

1. Enable Developer Mode on your Android device and connect it to your PC/Mac

2. Open this app and navigate to your web site by entering its URL

Debuggable Browser(圖5)-速報App

3. On your PC/Mac, open Chrome and type "chrome://inspect" into the address bar

4. In Chrome, check "Discover USB Devices" and it will list the web page you've opened on your device

5. Hit inspect and enjoy remote debugging the app with the Chrome Developer Tools

For more information, read: https://www.pertiller.tech/blog/remote-debugging-the-android-native-browser

Debuggable Browser(圖6)-速報App